<template>
  <div class="wrap">
    <div class="title_box">
      <span class="mainheading">设备名称</span>
      <span class="subheading">{{ equipmentStore.$state.devInfo.devName }}</span>
    </div>
    <a-card>
      <!-- <a-button type="primary" @click="addAcceptabilityClick">
        <template #icon>
          <icon-plus />
        </template>
        添加标准
      </a-button>
      <a-divider /> -->
      <a-scrollbar style="height: 85vh; overflow: auto">
        <div class="card_box">
          <div
            class="criterionCard animate__animated animate__fadeInUp"
            v-for="dsrl in devStandRangeList"
            :key="dsrl.devSRId"
          >
            <p class="cookieHeading">{{ dsrl.paramName }}</p>
            <p class="cookieDescription">
              当前标准：
              <span v-if="dsrl.standRangeTypeName == '两者之间'"
                >{{ dsrl.leftStandRange }} - {{ dsrl.rightStandRange }}</span
              >
              <span v-else-if="dsrl.standRangeTypeName == '大于等于'">{{ '>=' + dsrl.rightStandRange }}</span>
              <span v-else> {{ '<=' + dsrl.rightStandRange }}</span>
            </p>
            <p class="cookieDescription">
              <!-- 设置标准： -->
              <a-select
                :style="{ width: '100px' }"
                v-model="dsrl.standRangeTypeName"
                :default-value="dsrl.standRangeTypeName"
                size="mini"
              >
                <a-option>大于等于</a-option>
                <a-option>小于等于</a-option>
                <a-option>两者之间</a-option>
              </a-select>
              <!-- 两者之间 -->
              <span v-if="dsrl.standRangeTypeName == '两者之间'" style="display: inline">
                <a-input-number
                  v-model="dsrl.leftStandRange"
                  style="width: 90px; margin-left: 10px; margin-right: 5px"
                  class="input-demo"
                  :precision="3"
                  size="mini"
                  @change="
                    (e) => {
                      inputNumberChange(e, dsrl)
                    }
                  "
                />
                -
                <a-input-number
                  v-model="dsrl.rightStandRange"
                  style="width: 90px; margin-left: 5px"
                  class="input-demo"
                  :precision="3"
                  size="mini"
                  @change="
                    (e) => {
                      inputNumberChange(e, dsrl)
                    }
                  "
                />
              </span>
              <!--  -->
              <span v-else>
                <a-input-number
                  v-model="dsrl.rightStandRange"
                  style="width: 160px; margin-left: 10px"
                  class="input-demo"
                  :precision="3"
                  size="mini"
                  @change="
                    (e) => {
                      inputNumberChange(e, dsrl)
                    }
                  "
                />
              </span>
              <span class="span_params_unit">{{ dsrl.paramUnit }}</span>
            </p>
            <p class="cookieDescription">标准状态</p>
            <p class="cookieDescription">
              <a-switch
                v-model="dsrl.isOpen"
                checked-color="#12b434"
                @change="(e:any)=>{devStandRangeSwitchChange(e,dsrl.devSRId)}"
              >
              </a-switch>
              <span style="margin-left: 10px">{{ dsrl.isOpen ? '已启用' : '未启用' }}</span>
            </p>
          </div>
        </div>
      </a-scrollbar>
    </a-card>

    <!-- 添加设备的弹窗 -->
    <a-modal
      v-model:visible="isShowAddAcceptabilityModal"
      @ok="addAcceptabilityModalOkClick"
      @cancel="addAcceptabilityModalCancelClick"
    >
      <template #title> Title </template>
      <div>
        You can customize modal body text by the current situation. This modal will be closed immediately once you press
        the OK button.
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'criterionAcceptability'
})
</script>
<script lang="ts" setup>
// 引入
import {
  selectDevStandRangeApi,
  editDevStandRangeApi,
  openDevStandRangeApi,
  closeDevStandRangeApi
} from '@/apis/equipment'
import { useEquipmentStore } from '@/store'
import { Message } from '@arco-design/web-vue'
import result from '@/mock/user/route-modules/result'
const equipmentStore = useEquipmentStore()

// 是否显示添加标准的弹窗的标识
const isShowAddAcceptabilityModal = ref(false)

// 添加标准弹窗的确定点击事件
const addAcceptabilityModalOkClick = () => {}
// 添加标准弹窗的取消点击事件
const addAcceptabilityModalCancelClick = () => {}

// 添加标准按钮的点击事件
const addAcceptabilityClick = () => {
  isShowAddAcceptabilityModal.value = true
}

// 存储合格标准的数据
const devStandRangeList = ref([])

// 数字输入框的change事件
const inputNumberChange = async (e: any, dsrl: any) => {
  console.log(e, dsrl)
  let data = {
    devSRId: dsrl.devSRId,
    standRange: ''
  }
  switch (dsrl.standRangeTypeName) {
    case '两者之间':
      data.standRange = dsrl.leftStandRange + '-' + dsrl.rightStandRange
      break
    case '大于等于':
      data.standRange = '>=' + dsrl.rightStandRange
      break
    case '小于等于':
      data.standRange = '<=' + dsrl.rightStandRange
      break
    default:
      break
  }

  // 发送修改请求
  await editDevStandRangeApi(data)
    .then((res: any) => {
      if (res.result == 'error') {
        Message.error(res.msg)
        return
      } else {
        Message.success('修改成功')
      }
    })
    .catch(() => {
      Message.error('修改失败')
    })
  console.log(data)
  selectDevStandRangeListFunc()
}

// 合格标准的开关的change事件
const devStandRangeSwitchChange = async (e: any, devSRId: any) => {
  if (e) {
    await openDevStandRangeApi({ devSRId: devSRId })
      .then((res: any) => {
        if (res.result == 'error') {
          Message.error(res.msg)
          return
        } else {
          Message.success('启用成功')
        }
      })
      .catch(() => {
        Message.error('启用失败')
      })
  } else {
    await closeDevStandRangeApi({ devSRId: devSRId })
      .then((res: any) => {
        if (res.result == 'error') {
          Message.error(res.msg)
          return
        } else {
          Message.success('关闭成功')
        }
      })
      .catch(() => {
        Message.error('关闭失败')
      })
  }

  selectDevStandRangeListFunc()
}

// 获取合格标准数据的函数
const selectDevStandRangeListFunc = async () => {
  const res = await selectDevStandRangeApi({ devId: equipmentStore.$state.devInfo.devId })
  console.log(res)
  res.data.devStandRangeList.forEach((item: any) => {
    // 改变isOpen的值
    if (item.isOpen == '1') {
      item.isOpen = true
    } else {
      item.isOpen = false
    }
    var regexD = /-/
    var regexB = />/
    var regexS = /</
    if (item.standRange != '') {
      if (regexD.test(item.standRange)) {
        let arr = item.standRange.split('-')
        item.leftStandRange = parseFloat(arr[0])
        item.rightStandRange = parseFloat(arr[1])
        item.standRangeTypeName = '两者之间'
      } else if (regexB.test(item.standRange)) {
        let arr = item.standRange.split('>=')
        item.rightStandRange = parseFloat(arr[1])
        item.standRangeTypeName = '大于等于'
      } else if (regexS.test(item.standRange)) {
        let arr = item.standRange.split('<=')
        item.rightStandRange = parseFloat(arr[1])
        item.standRangeTypeName = '小于等于'
      }
    } else {
      item.rightStandRange = 0
    }

    // 调整范围的值
    // item.standRange
  })
  console.log(res.data.devStandRangeList)

  devStandRangeList.value = res.data.devStandRangeList
}

// 初始化
onMounted(() => {
  selectDevStandRangeListFunc()
})
</script>

<style lang="scss" scoped>
.wrap {
  padding: 14px;
  .title_box {
    margin-bottom: 10px;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: bold;
    .mainheading {
      margin-right: 6px;
    }
    .subheading {
      font-size: 16px;
      font-weight: bold;
      font-family: '黑体';
    }
  }
  .span_params_unit {
    margin-left: 10px;
    font-size: 9px;
  }
}

.card_box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* 卡片样式 ---------------------------------------------------------------------------- */
.criterionCard {
  margin-top: 20px;
  width: 460px;
  height: 200px;
  background: linear-gradient(to right, rgb(74, 148, 245), rgb(98, 82, 245));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  margin-left: 30px;
  border-radius: 10px;
  /* transition: 2s; */
}

.criterionCard::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(to right, rgb(96, 119, 252), rgb(112, 76, 241));
  opacity: 0;
  transition: 0.3s;
}

.criterionCard:hover:after {
  opacity: 1;
  /* margin-top: -6px; */
  /* transition: 0.3s !important; */
  /* --animation-direction: 2s; */
  /* transition: 2s !important; */
  /* transition-duration: 2s;
  background: linear-gradient(to right, rgb(96, 119, 252), rgb(112, 76, 241)); */
  /* background: red; */
}

.criterionCard::before {
  width: 200px;
  height: 200px;
  content: '';
  background: linear-gradient(to right, rgb(74, 148, 245), rgb(98, 82, 245));
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  right: -25%;
  top: -25%;
}

.cookieHeading {
  font-size: 1.5em;
  font-weight: 600;
  color: rgb(241, 241, 241);
  z-index: 2;
}

.cookieDescription {
  font-size: 0.9em;
  color: rgb(241, 241, 241);
  z-index: 2;
}

.cookieDescription a {
  color: rgb(241, 241, 241);
}
</style>
